<template>

  <van-nav-bar left-text="返回" left-arrow @click-left="router.go(-1)"/>

  <div class="wrapper">
    <div class="nav">
      <p>商家已接单</p>
      <div class="call">
        <van-icon name="phone"/>
        联系商家
      </div>
    </div>

    <ul>
      <li>
        <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </li>

      <li>
        <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </li>
    </ul>
    <van-cell title="" value="总价100" />

    <van-cell-group style="margin-top: 10px" >
      <van-cell title="订单编号" value="110" />
      <van-cell title="下单时间" value="2011-11-11 11:11:11"/>
      <van-cell title="付款方式" value="微信支付"/>
      <van-cell title="订单备注" value="很着急"/>
    </van-cell-group>


  </div>


</template>

<script setup lang="ts">
import {ref, reactive} from 'vue';
import {useRouter} from 'vue-router';

const router = useRouter();

let active = ref(0);

let handleBookDetail = () => {
  router.push({"path": "/book/110"});
}

</script>

<style scoped>

.wrapper {
  padding: 10px 10px 0 10px;
}

.nav {
  text-align: center;
  background-color: #ffffff;
  font-weight: bold;
  color: #333333;
  box-sizing: border-box;
  padding: 10px;
}

.nav p {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}

.nav div {
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  color: #F69533;
}

.wrapper ul {
  margin-top: 10px;
}

.wrapper ul li{
  background-color: #fff;
  border-bottom: 1px solid #F6F7F8;
}
.wrapper ul li:first-child{
  margin-top: 0;
}

::v-deep .van-card {
  background-color: #fff;
}
</style>

